<template>
  <view class="process-data-entry-page">
    <!-- 顶部导航栏 -->
    <u-navbar 
      :fixed="true" 
      :autoBack="true" 
      title="数据录入" 
      :safeAreaInsetTop="true" 
      leftIconColor="#fff"
    ></u-navbar>

    <scroll-view class="scroll-container" scroll-y>
      <view class="content">
        <!-- 数据录入表单 -->
        <view class="form-card">
          <view class="form-header">
            <text class="form-title">样本数据录入</text>
            <button class="clear-btn" @click="clearData">清空数据</button>
          </view>

          <view class="input-section">
            <text class="input-label">请输入样本数据（支持逗号、空格或换行分隔）</text>
            <textarea 
              v-model="sampleDataInput" 
              class="textarea-input"
              placeholder="例如：8.2, 9.5, 10.1 或每行一个数值..."
              @input="parseSampleData"
            ></textarea>
          </view>

          <view class="spec-grid">
            <view class="spec-item">
              <text class="input-label">下限 (LSL)</text>
              <input 
                type="digit" 
                v-model.number="specLimits.LSL" 
                class="spec-input"
                placeholder="输入下限值"
              />
            </view>
            <view class="spec-item">
              <text class="input-label">目标值</text>
              <input 
                type="digit" 
                v-model.number="specLimits.target" 
                class="spec-input"
                placeholder="输入目标值"
              />
            </view>
            <view class="spec-item">
              <text class="input-label">上限 (USL)</text>
              <input 
                type="digit" 
                v-model.number="specLimits.USL" 
                class="spec-input"
                placeholder="输入上限值"
              />
            </view>
          </view>

          <button class="calc-btn" @click="calculateProcessCapability">
            计算过程能力
          </button>
        </view>

        <!-- 数据摘要 -->
        <view class="summary-card">
          <text class="summary-title">数据摘要</text>
          
          <view class="stats-grid">
            <view class="stat-item">
              <text class="stat-label">样本数量</text>
              <text class="stat-value">{{ sampleCount }}</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">平均值</text>
              <text class="stat-value">{{ meanValue ? meanValue.toFixed(2) : '--' }}</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">标准差</text>
              <text class="stat-value">{{ stdDev ? stdDev.toFixed(2) : '--' }}</text>
            </view>
            <view class="stat-item">
              <text class="stat-label">数据范围</text>
              <text class="stat-value">{{ minValue ? `${minValue.toFixed(2)} - ${maxValue.toFixed(2)}` : '--' }}</text>
            </view>
          </view>
          
          <view class="spec-visual-container">
            <view class="spec-visual-header">
              <text class="spec-visual-title">规格限分布</text>
              <view class="switch-container">
                <text class="switch-label">自动计算统计量</text>
                <u-switch v-model="autoCalculate" @change="toggleAutoCalculate" />
              </view>
            </view>
            
            <view class="spec-bar-container">
              <!-- 不合格区域（LSL左侧） -->
              <view class="spec-bar-lsl" :style="{ width: `${lslPercent}%` }"></view>
              
              <!-- 合格区域（LSL-USL之间） -->
              <view class="spec-bar-spec" :style="{ left: `${lslPercent}%`, width: `${specWidthPercent}%` }"></view>
              
              <!-- 不合格区域（USL右侧） -->
              <view class="spec-bar-usl" :style="{ left: `${uslPercent}%`, width: `${100 - uslPercent}%` }"></view>
              
              <!-- LSL标记线 -->
              <view class="mark-line mark-line-lsl" :style="{ left: `${lslPositionPercent}%` }"></view>
              <view class="mark-label mark-label-lsl" :style="{ left: `${lslPositionPercent}%` }">
                LSL: {{ specLimits.LSL }}
              </view>
              
              <!-- 目标值标记线 -->
              <view class="mark-line mark-line-target" :style="{ left: `${targetPositionPercent}%` }"></view>
              <view class="mark-label mark-label-target" :style="{ left: `${targetPositionPercent}%` }">
                目标: {{ specLimits.target }}
              </view>
              
              <!-- USL标记线 -->
              <view class="mark-line mark-line-usl" :style="{ left: `${uslPositionPercent}%` }"></view>
              <view class="mark-label mark-label-usl" :style="{ left: `${uslPositionPercent}%` }">
                USL: {{ specLimits.USL }}
              </view>
              
              <!-- 均值标记线 -->
              <view class="mark-line mark-line-mean" v-if="meanValue" :style="{ left: `${meanPositionPercent}%` }"></view>
              <view class="mark-label mark-label-mean" v-if="meanValue" :style="{ left: `${meanPositionPercent}%` }">
                均值: {{ meanValue.toFixed(2) }}
              </view>
            </view>
          </view>
        </view>

        <!-- 过程能力指标 -->
        <view class="summary-card">
          <text class="summary-title">过程能力指标</text>
          
          <view class="capability-grid">
            <view class="capability-card">
              <text class="capability-label">CP（过程潜在能力）</text>
              <view class="capability-value-container">
                <text class="capability-value">{{ processIndexes.CP ? processIndexes.CP.toFixed(2) : '--' }}</text>
                <text class="capability-status" :class="getStatusClass('CP', processIndexes.CP)">
                  {{ getStatusText('CP', processIndexes.CP) }}
                </text>
              </view>
            </view>
            
            <view class="capability-card">
              <text class="capability-label">CPK（过程实际能力）</text>
              <view class="capability-value-container">
                <text class="capability-value">{{ processIndexes.CPK ? processIndexes.CPK.toFixed(2) : '--' }}</text>
                <text class="capability-status" :class="getStatusClass('CPK', processIndexes.CPK)">
                  {{ getStatusText('CPK', processIndexes.CPK) }}
                </text>
              </view>
            </view>
            
            <view class="capability-card">
              <text class="capability-label">PP（长期过程性能）</text>
              <view class="capability-value-container">
                <text class="capability-value">{{ processIndexes.PP ? processIndexes.PP.toFixed(2) : '--' }}</text>
                <text class="capability-status" :class="getStatusClass('PP', processIndexes.PP)">
                  {{ getStatusText('PP', processIndexes.PP) }}
                </text>
              </view>
            </view>
            
            <view class="capability-card">
              <text class="capability-label">PPK（长期性能指数）</text>
              <view class="capability-value-container">
                <text class="capability-value">{{ processIndexes.PPK ? processIndexes.PPK.toFixed(2) : '--' }}</text>
                <text class="capability-status" :class="getStatusClass('PPK', processIndexes.PPK)">
                  {{ getStatusText('PPK', processIndexes.PPK) }}
                </text>
              </view>
            </view>
          </view>
        </view>

        <!-- 数据分布直方图 -->
        <view class="summary-card">
          <view class="histogram-header">
            <text class="summary-title">数据分布直方图</text>
            <button class="refresh-btn" @click="regenerateHistogram">
              <u-icon name="refresh" size="24" class="refresh-icon"></u-icon>
              刷新图表
            </button>
          </view>
          
          <qiun-data-charts 
            type="bar" 
            :chartData="histogramData" 
            :canvas2d="true" 
            width="100%" 
            height="400rpx"
            :lazyLoad="true"
          />
        </view>

        <!-- 改进建议 -->
        <view class="summary-card">
          <text class="summary-title">改进建议</text>
          
          <view class="suggestions-container">
            <view class="suggestion-item">
              <u-icon name="arrow-right" size="28" class="suggestion-icon"></u-icon>
              <text v-if="processIndexes.CPK && processIndexes.CPK < 1.33" class="suggestion-text">
                CPK={{ processIndexes.CPK.toFixed(2) }} < 1.33，过程能力不足，需优先减少过程变异或调整过程中心
              </text>
              <text v-else class="suggestion-text">
                过程能力良好（CPK≥1.33），建议持续监控以维持稳定性
              </text>
            </view>
            
            <view class="suggestion-item">
              <u-icon name="arrow-right" size="28" class="suggestion-icon"></u-icon>
              <text v-if="meanValue && Math.abs(meanValue - specLimits.target) > (specLimits.USL - specLimits.LSL) * 0.1" class="suggestion-text">
                过程均值（{{ meanValue.toFixed(2) }}）与目标值（{{ specLimits.target }}）偏移较大，建议调整设备校准或操作规范
              </text>
              <text v-else class="suggestion-text">
                过程中心与目标值接近（偏移≤10%规格宽度），状态良好
              </text>
            </view>
            
            <view class="suggestion-item">
              <u-icon name="arrow-right" size="28" class="suggestion-icon"></u-icon>
              <text v-if="processIndexes.CP && processIndexes.CP < 1.67" class="suggestion-text">
                CP={{ processIndexes.CP.toFixed(2) }} < 1.67，过程潜在能力不足，需优化过程设计或提高设备精度
              </text>
              <text v-else class="suggestion-text">
                过程潜在能力充足（CP≥1.67），可考虑降低检验频率或优化成本
              </text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { computeProcessIndex } from '@/common/comFun/spc-utils.js';

export default {
  data() {
    return {
      // 输入框原始内容
      sampleDataInput: '',
      
      // 解析后的样本数据（数值数组）
      sampleData: [],
      
      // 规格限参数
      specLimits: {
        LSL: 7.5,
        USL: 12.5,
        target: 10
      },
      
      // 过程能力指标
      processIndexes: {
        CP: null,
        CPK: null,
        PP: null,
        PPK: null
      },
      
      // 直方图数据
      histogramData: {
        categories: [],
        series: [],
        xAxis: {
          name: '测量值',
          limitLine: []
        },
        yAxis: {
          name: '频数'
        }
      },
      
      // 自动计算开关
      autoCalculate: true,
      
      // 基本统计量
      sampleCount: 0,
      meanValue: null,
      stdDev: null,
      minValue: null,
      maxValue: null,
      
      // 规格限可视化参数
      lslPercent: 20,
      uslPercent: 80,
      specWidthPercent: 60,
      lslPositionPercent: 20,
      targetPositionPercent: 50,
      uslPositionPercent: 80,
      meanPositionPercent: 0
    };
  },
  onLoad() {
    // 初始化示例数据
    this.sampleDataInput = `8.2, 9.5, 10.1, 7.8, 9.9, 11.2, 10.3, 11.1, 9.8,
8.7, 9.3, 10.5, 8.9, 10.2, 11.5, 9.6, 10.8, 8.5,
9.1, 10.4, 11.3, 8.3, 9.7, 10.9, 9.2`;
    this.parseSampleData();
  },
  methods: {
    // 解析输入的样本数据
    parseSampleData() {
      // 处理多种分隔符（逗号、空格、换行）
      const values = this.sampleDataInput
        .replace(/[\n,; ]+/g, ',')  // 统一分隔符为逗号
        .split(',')                 // 分割为数组
        .map(val => val.trim())     // 去除首尾空格
        .filter(val => val !== '')  // 过滤空值
        .map(Number)                // 转换为数字
        .filter(num => !isNaN(num));// 过滤非数字
      
      this.sampleData = values;
      this.sampleCount = values.length;
      
      // 自动计算基本统计量
      if (this.autoCalculate && values.length > 1) {
        this.calculateBasicStats();
      }
    },
    
    // 计算基本统计量
    calculateBasicStats() {
      if (this.sampleData.length === 0) return;
      
      // 计算均值
      const sum = this.sampleData.reduce((acc, val) => acc + val, 0);
      this.meanValue = sum / this.sampleData.length;
      
      // 计算标准差（样本标准差，n-1）
      const variance = this.sampleData.reduce((acc, val) => 
        acc + Math.pow(val - this.meanValue, 2), 0) / (this.sampleData.length - 1);
      this.stdDev = Math.sqrt(variance);
      
      // 计算最值
      this.minValue = Math.min(...this.sampleData);
      this.maxValue = Math.max(...this.sampleData);
      
      // 更新规格限可视化
      this.updateSpecVisualization();
    },
    
    // 更新规格限可视化参数
    updateSpecVisualization() {
      if (!this.meanValue) return;
      
      // 计算可视化范围（扩展10%避免边界问题）
      const minRange = Math.min(this.minValue, this.specLimits.LSL) * 0.9;
      const maxRange = Math.max(this.maxValue, this.specLimits.USL) * 1.1;
      const range = maxRange - minRange;
      
      // 计算各点在可视化范围内的百分比位置
      this.lslPositionPercent = ((this.specLimits.LSL - minRange) / range) * 100;
      this.targetPositionPercent = ((this.specLimits.target - minRange) / range) * 100;
      this.uslPositionPercent = ((this.specLimits.USL - minRange) / range) * 100;
      this.meanPositionPercent = ((this.meanValue - minRange) / range) * 100;
      
      // 计算区域宽度百分比
      this.lslPercent = this.lslPositionPercent;
      this.specWidthPercent = this.uslPositionPercent - this.lslPositionPercent;
      this.uslPercent = this.uslPositionPercent;
      
      // 更新直方图
      this.generateHistogramData();
    },
    
    // 计算过程能力指标
    calculateProcessCapability() {
      if (this.sampleData.length < 5) {
        uni.showToast({
          title: '样本数量不足（至少需要5个数据）',
          icon: 'none'
        });
        return;
      }
      
      if (!this.specLimits.LSL || !this.specLimits.USL) {
        uni.showToast({
          title: '请填写完整的规格限（LSL和USL）',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 计算过程能力指标
        this.processIndexes = computeProcessIndex(this.sampleData, this.specLimits);
        
        // 生成直方图
        this.generateHistogramData();
        
        // 提示成功
        uni.showToast({
          title: '计算成功',
          icon: 'success'
        });
      } catch (e) {
        console.error('计算失败：', e);
        uni.showToast({
          title: '计算失败：' + e.message,
          icon: 'none'
        });
      }
    },
    
    // 生成直方图数据
    generateHistogramData() {
      if (this.sampleData.length === 0) return;
      
      const data = this.sampleData;
      const { LSL, USL } = this.specLimits;
      
      // 动态确定分组数（5-10组）
      const binCount = Math.min(10, Math.max(5, Math.floor(Math.sqrt(data.length))));
      
      // 计算分组范围（覆盖数据和规格限）
      const minVal = Math.min(...data, LSL);
      const maxVal = Math.max(...data, USL);
      const binWidth = (maxVal - minVal) / binCount;
      
      // 计算每组频数
      const bins = Array.from({ length: binCount }, (_, i) => {
        const start = minVal + i * binWidth;
        const end = start + binWidth;
        const count = data.filter(v => v >= start && v < end).length;
        return {
          name: `${start.toFixed(1)}-${end.toFixed(1)}`,
          value: count
        };
      });
      
      // 组装直方图数据（适配qiun-data-charts）
      this.histogramData = {
        categories: bins.map(bin => bin.name),
        series: [{
          name: '频数',
          data: bins.map(bin => bin.value),
          color: '#409eff',
          barWidth: '80%'
        }],
        xAxis: {
          name: '测量值',
          limitLine: [
            { value: LSL, name: 'LSL', color: '#f56c6c' },
            { value: USL, name: 'USL', color: '#f56c6c' },
            { value: this.specLimits.target, name: '目标', color: '#67c23a', lineType: 'dashed' }
          ]
        },
        yAxis: {
          name: '频数',
          min: 0
        }
      };
    },
    
    // 切换自动计算开关
    toggleAutoCalculate() {
      if (this.autoCalculate && this.sampleData.length > 1) {
        this.calculateBasicStats();
      }
    },
    
    // 刷新直方图
    regenerateHistogram() {
      if (this.sampleData.length > 0) {
        this.generateHistogramData();
        uni.showToast({
          title: '图表已刷新',
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: '请先输入样本数据',
          icon: 'none'
        });
      }
    },
    
    // 清空数据
    clearData() {
      this.sampleDataInput = '';
      this.sampleData = [];
      this.sampleCount = 0;
      this.meanValue = null;
      this.stdDev = null;
      this.minValue = null;
      this.maxValue = null;
      this.processIndexes = { CP: null, CPK: null, PP: null, PPK: null };
      this.histogramData = { categories: [], series: [], xAxis: {}, yAxis: {} };
      
      // 重置规格限可视化
      this.lslPositionPercent = 20;
      this.targetPositionPercent = 50;
      this.uslPositionPercent = 80;
      this.meanPositionPercent = 0;
    },
    
    // 获取指标状态样式
    getStatusClass(type, value) {
      if (value === null) return 'status-poor';
      
      switch (type) {
        case 'CP':
        case 'PP':
          return value >= 1.67 ? 'status-excellent' :
                 value >= 1.33 ? 'status-good' :
                 value >= 1.0 ? 'status-acceptable' : 'status-poor';
                  
        case 'CPK':
        case 'PPK':
          return value >= 1.67 ? 'status-excellent' :
                 value >= 1.33 ? 'status-good' :
                 value >= 1.0 ? 'status-acceptable' : 'status-poor';
      }
    },
    
    // 获取指标状态文本
    getStatusText(type, value) {
      if (value === null) return '未计算';
      
      switch (type) {
        case 'CP':
        case 'PP':
          return value >= 1.67 ? '超理想' :
                 value >= 1.33 ? '理想' :
                 value >= 1.0 ? '合格' : '不足';
                  
        case 'CPK':
        case 'PPK':
          return value >= 1.67 ? '超理想' :
                 value >= 1.33 ? '理想' :
                 value >= 1.0 ? '合格' : '风险';
      }
    }
  }
};
</script>

<style scoped>
.process-data-entry-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

/* 滚动容器 */
.scroll-container {
  flex: 1;
  overflow-y: auto;
  padding-top: 88rpx; /* 适配导航栏高度 */
  box-sizing: border-box;
}

.content {
  width: 100%;
  padding: 24rpx;
  box-sizing: border-box;
}

/* 表单卡片样式 */
.form-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.form-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.clear-btn {
  background-color: #409eff;
  color: #ffffff;
  font-size: 26rpx;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  line-height: 1;
  border: none;
}

.clear-btn:active {
  background-color: #3a8ee6;
}

/* 输入区域样式 */
.input-section {
  margin-bottom: 32rpx;
}

.input-label {
  font-size: 28rpx;
  color: #666666;
  display: block;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.textarea-input {
  width: 100%;
  min-height: 200rpx;
  border: 2rpx solid #e5e6eb;
  border-radius: 12rpx;
  padding: 24rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
  resize: vertical;
}

.textarea-input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
}

/* 规格限输入区 */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24rpx;
  margin-bottom: 32rpx;
}

.spec-item {
  display: flex;
  flex-direction: column;
}

.spec-input {
  height: 88rpx;
  border: 2rpx solid #e5e6eb;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
}

.spec-input:focus {
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
}

/* 计算按钮 */
.calc-btn {
  width: 100%;
  height: 96rpx;
  background-color: #52c41a;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 12rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-btn:active {
  background-color: #4dba18;
}

/* 摘要卡片样式 */
.summary-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.summary-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 32rpx;
  display: block;
}

/* 统计量网格 */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24rpx;
  margin-bottom: 32rpx;
}

.stat-item {
  background-color: #f6f8fa;
  border-radius: 12rpx;
  padding: 24rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666666;
  display: block;
  margin-bottom: 8rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  line-height: 1.2;
}

/* 规格限可视化 */
.spec-visual-container {
  margin: 32rpx 0;
}

.spec-visual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.spec-visual-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
}

.switch-container {
  display: flex;
  align-items: center;
}

.switch-label {
  font-size: 24rpx;
  color: #666666;
  margin-right: 16rpx;
}

.spec-bar-container {
  position: relative;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  overflow: hidden;
  margin-bottom: 40rpx;
}

.spec-bar-lsl {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #fff1f0;
}

.spec-bar-spec {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #f6ffed;
}

.spec-bar-usl {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #fff1f0;
}

/* 标记线和标签 */
.mark-line {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2rpx;
  transform: translateX(-50%);
}

.mark-line-lsl {
  background-color: #f5222d;
}

.mark-line-target {
  background-color: #1890ff;
}

.mark-line-usl {
  background-color: #f5222d;
}

.mark-line-mean {
  background-color: #722ed1;
  width: 4rpx;
}

.mark-label {
  position: absolute;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  color: #ffffff;
  transform: translateX(-50%);
  white-space: nowrap;
}

.mark-label-lsl {
  background-color: #f5222d;
  top: -40rpx;
}

.mark-label-target {
  background-color: #1890ff;
  top: -40rpx;
}

.mark-label-usl {
  background-color: #f5222d;
  top: -40rpx;
}

.mark-label-mean {
  background-color: #722ed1;
  bottom: -40rpx;
}

/* 过程能力指标网格 */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
  margin: 32rpx 0;
}

.capability-card {
  background-color: #ffffff;
  border: 2rpx solid #f0f0f0;
  border-radius: 12rpx;
  padding: 24rpx;
  transition: all 0.2s;
}

.capability-card:active {
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.capability-label {
  font-size: 24rpx;
  color: #666666;
  display: block;
  margin-bottom: 8rpx;
}

.capability-value-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.capability-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.capability-status {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  font-weight: 500;
}

.status-excellent {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-good {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-acceptable {
  background-color: #fffbe6;
  color: #faad14;
}

.status-poor {
  background-color: #fff1f0;
  color: #f5222d;
}

/* 直方图样式 */
.histogram-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.refresh-btn {
  display: flex;
  align-items: center;
  color: #1890ff;
  font-size: 24rpx;
  background: transparent;
  border: none;
  padding: 0;
}

.refresh-icon {
  margin-right: 8rpx;
}

/* 改进建议 */
.suggestions-container {
  margin-top: 16rpx;
}

.suggestion-item {
  display: flex;
  margin-bottom: 24rpx;
  line-height: 1.6;
}

.suggestion-icon {
  color: #1890ff;
  margin-right: 16rpx;
  margin-top: 4rpx;
}

.suggestion-text {
  font-size: 26rpx;
  color: #666666;
  flex: 1;
}
</style>